<template>
  <view class="container">
    <view class="upload flexCenter">
      <view class="btn" v-if="!img" @click="handleUpload">上传图片</view>
      <view class="imgBox" v-else>
        <image class="img" :src="img" mode="aspectFit" />
      </view>
    </view>
    <view class="operate flexBetween">
      <view class="left"
        >已选：<text style="color: red">{{ text }}</text></view
      >
      <view class="right" @click="submit">立即生成</view>
    </view>
    <view class="template">
      <view class="template-item" :class="active == index ? 'active' : ''" v-for="(item, index) in imgList" :key="index" @click="select(item, index)">
        <image class="img" :src="item.url" mode="widthFix" />
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getImage, uploadFile } from '@/api/common.js'
import subscribe from '@/utils/subscribe'
export default {
  data() {
    return {
      linkUrl: '',
      img: '',
      text: '',
      active: 0,
      imgList: [
        {
          text: '复古漫画',
          url: '/static/images/cartoon/1.jpg',
          value: 0
        },
        {
          text: '3D 童话',
          url: '/static/images/cartoon/2.png',
          value: 1
        },
        {
          text: '二次元',
          url: '/static/images/cartoon/3.png',
          value: 2
        },
        {
          text: '小清新',
          url: '/static/images/cartoon/4.png',
          value: 3
        },
        {
          text: '未来科技',
          url: '/static/images/cartoon/5.png',
          value: 4
        },
        {
          text: '国画古风',
          url: '/static/images/cartoon/6.png',
          value: 5
        },
        {
          text: '将军百战',
          url: '/static/images/cartoon/7.png',
          value: 6
        },
        {
          text: '炫彩卡通',
          url: '/static/images/cartoon/8.png',
          value: 7
        },
        {
          text: '清雅国风',
          url: '/static/images/cartoon/9.png',
          value: 8
        }
      ]
    }
  },
  onLoad() {
    this.text = this.imgList[0].text
    this.active = this.imgList[0].value
  },
  methods: {
    ...subscribe,
    // 选择
    select(item, index) {
      this.text = item.text
      this.active = item.value
    },
    // 上传
    handleUpload() {
      let that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        // sourceType: ['album'], //从相册选择
        success: function (res) {
          that.uploadFile({
            filePath: res.tempFilePaths[0]
          })
          // console.log(JSON.stringify(res.tempFilePaths))
        }
      })
    },
    uploadFile(data) {
      uni.showLoading({
        title: '正在上传中...',
        mask: true
      })
      uploadFile(data)
        .then((res) => {
          this.img = res.data
          uni.hideLoading()
        })
        .catch((err) => {
          uni.hideLoading()
        })
    },
    // 提交
    submit() {
      if (!this.img) {
        uni.showToast({
          icon: 'none',
          title: '请上传图片'
        })
        return
      }
      uni.showLoading({
        title: '正在生成中...',
        mask: true
      })

      getImage({
        index: this.active,
        file: this.img
      })
        .then((res) => {
          uni.hideLoading()
          uni.showToast({
            title: res.data,
            icon: 'none'
          })
          this.getSubscribeList(false)
        })
        .catch((err) => {
          uni.hideLoading()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  .upload {
    min-height: 30vh;
    background: #fff;
    .btn {
      width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background: radial-gradient(0% 70% at 50% 50%, #ff5b24 0%, #bc0a0d 100%);
      border-radius: 33rpx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
  .operate {
    margin-top: 20rpx;
    .left {
      font-weight: 600;
      font-size: 28rpx;
      color: #222222;
    }
    .right {
      width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background: #f9e8e8;
      border-radius: 33rpx;
      font-size: 28rpx;
      color: #ca1a1d;
    }
  }
  .template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20rpx;
    text-align: center;
    margin-top: 20rpx;
    .img {
      width: 100%;
      // height: 225rpx;
    }
    .text {
      margin-top: 8rpx;
    }
    .template-item {
      &.active {
        .text {
          color: red;
        }
      }
    }
  }
}
</style>
